<template>
  <view class="components-message">
	<u-modal :show="showModel" :title="title" :content='content' :confirmText='confirmText'
      :cancelText='cancelText' :closeOnClickOverlay='maskcloseAble' :showCancelButton="showCancel">
		<view class="slot-content">
			<rich-text :nodes="content"></rich-text>
		</view>
		<view slot="confirmButton" class="u-flex u-flex-between" v-if="showCancel==true">
			<view class="btn cancel" @click="handleClose">
				<text>{{cancelText}}</text>
			</view>
			<view class="btn submit" @click="handleBtn">
				<text>{{confirmText}}</text>
			</view>
		</view>
		<view slot="confirmButton" class="btn see" v-else @click="showModel=false">
			<text>{{confirmText}}</text>
		</view>
	</u-modal>
  </view>
</template>

<script>
// import引入的组件需要注入到对象中才能使用
export default {
  name: "Cmessage",
  // 组件模板
  components: {},
  data() {
    // 这里存放数据
    return {
      showModel: false,//是否显示
      title:'提示',//标题
      content: "",//内容
      showCancel:true, //是否显示取消按钮
      confirmText:'确认', //确认文字
      cancelText:'取消',//取消文字
      maskcloseAble:true, //是否允许点击遮罩关闭Modal
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  onLoad(options) {},
  // 生命周期 - 页面展示（不可以访问DOM元素）
  onShow() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  onReady() {},
  // 方法集合
  methods: {
    emitBtn() {},
    emitClose() {},
    handleClose() {
      this.$el.parentNode.removeChild(this.$el);
      this.emitClose();
    },
    handleBtn() {
      this.$el.parentNode.removeChild(this.$el);
      this.emitBtn();
    },
  },
  onHide() {}, // 生命周期 - 监听页面隐藏
  onUnload() {}, // 生命周期 - 监听页面卸载
};
</script>
<style lang='scss' scoped>
	.btn {
		width: 450rpx;
		height: 92rpx;
		text-align: center;
		line-height: 92rpx;
		margin: 0 auto;
	
		&.cancel {
			background: #F6F6F6;
			color: #111111;
			width: 278rpx;
		}
	
		&.see {
			background: #FF7612;
			color: #fff;
		}
	
		&.submit {
			background: #FF7612;
			color: #fff;
			width: 278rpx;
		}
	}
	
</style>
